<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
    <script src="../build/react/umd/react.development.js"></script>
    <script src="../build/react-dom/umd/react-dom.development.js"></script>
    <script src="../build/babel/babel.min.js"></script>
    <script src="../build/jquery/jquery.min.js"></script>
  </head>

  <body>
    <div id="root"></div>
    <script type="text/babel">
      class RepoList extends React.Component {
        constructor(props) {
          super(props);
          this.state = {
            loading: true,
            error: null,
            data: null
          };
        }

        componentDidMount() {
          this.props.promise.then(
            value => this.setState({ loading: false, data: value }),
            error => this.setState({ loading: false, error: error })
          );
        }

        render() {
          if (this.state.loading) {
            return <span>Loading...</span>;
          } else if (this.state.error !== null) {
            return <span>Error: {this.state.error.message}</span>;
          } else {
            var repos = this.state.data.items;
            var repoList = repos.map(function(repo, index) {
              return (
                <li key={index}>
                  <a href={repo.html_url}>{repo.name}</a> (
                  {repo.stargazers_count} stars) <br /> {repo.description}
                </li>
              );
            });
            return (
              <main>
                <h1>Most Popular JavaScript Projects in Github</h1>
                <ol>{repoList}</ol>
              </main>
            );
          }
        }
      }

      ReactDOM.render(
        <RepoList
          promise={$.getJSON("https://api.github.com/search/repositories?q=javascript&sort=stars")}
        />,
        document.getElementById("root")
      );
    </script>
  </body>
</html>
